import CodeView from '../../../shared/components/CodeView';
import DisplayColumn from '../../../shared/components/DisplayColumn';
import DisplayGrid from '../../../shared/components/DisplayGrid';
import Blockquote from '../../../shared/components/Blockquote';
import StylingHooksTable from '../../../shared/components/StylingHooksTable';
import { getDisplayElementById } from '../../shared/helpers';
import * as Base from './base/example';

<div className="doc lead">
  The Rich Text Editor is a textarea with added capabilities for use in various publishers.
</div>

<CodeView exampleOnly>
  {getDisplayElementById(Base.states, 'filled-out')}
</CodeView>

## About Rich Text Editor

At a high-level, the buttons in Rich Text Editor (RTE) are organized into four groupings: “format text”, “format body”, “insert content”, and “clear formatting”.

The "clear formatting” button always stays at the end of the buttons set, regardless of which rich text editor variant is used. It should always stand by itself.

On smaller screen sizes, the select dropdowns for Font and Size in the toolbar can overlap outside of the container. To adjust the widths of the dropdowns, apply the class `slds-region_narrow` to the outermost `div` of the rich text editor.

A label may be used to further describe the purpose of a Rich Text Editor. To add a label, place a `<span>` element with the class `slds-form-element__label`, right before the `slds-form-element__control` element.

### Accessibility

Ensure that there is a single tab key stop for the button groups in the toolbar, and that left and right arrows are used to navigate through each button.

## Base

<CodeView>
  {getDisplayElementById(Base.default)}
</CodeView>

## States

### Focused

<CodeView>
  {getDisplayElementById(Base.states, 'focused')}
</CodeView>


### Filled Out

<CodeView>
  {getDisplayElementById(Base.states, 'filled-out')}
</CodeView>

### Error

<CodeView>
  {getDisplayElementById(Base.states, 'error')}
</CodeView>

### Disabled

<CodeView>
  {getDisplayElementById(Base.states, 'disabled')}
</CodeView>

### Tooltip

<CodeView>
  {getDisplayElementById(Base.states, 'tooltip')}
</CodeView>

## Examples

### Bottom toolbar

<CodeView>
  {getDisplayElementById(Base.examples, 'bottom-toolbar')}
</CodeView>

### With a Label

<CodeView>
  {getDisplayElementById(Base.examples, 'with-label')}
</CodeView>

### Email

<CodeView>
  {getDisplayElementById(Base.examples, 'email')}
</CodeView>

### Toolbar Narrow

<CodeView>
  {getDisplayElementById(Base.examples, 'toolbar-narrow')}
</CodeView>

### Feed

<CodeView>
  {getDisplayElementById(Base.examples, 'feed')}
</CodeView>

### Notes

<CodeView>
  {getDisplayElementById(Base.examples, 'note')}
</CodeView>

## Styling Hooks Overview

<StylingHooksTable name="rich-text-editor" type="component" />
